<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>船舶航海</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="http://api.shipxy.com/h5/api/plugins/jquery/jquery.min.js"></script>
    <script src="http://api.shipxy.com/h5/api/?v=3.0&k=1F6D701272402D1E7D8D316CCE519123"></script>

    <script src="http://api.shipxy.com/h5/api/3.0/ElaneMap.min.js"></script>
    
    <!-- 引入样式 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      .div {
        margin: 0;
      }
      body {
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
      }
      .my-map {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: none;
        background-color: #a3ccff;
      }

      .div_btn {
        position: relative;
        top: 10px;
        left: 80px;
        z-index: 888;
      }

      .div_btn input[type='button'] {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="map" class="my-map">
      <div class="div_btn">
        <input id="btn_draw_track" type="button" value="绘制" />
        <input id="btn_draw_track_edit" type="button" value="编辑" />
        <input id="btn_draw_track_finish" type="button" value="完成" />
        <input id="btn_draw_track_delete" type="button" value="删除" />
        <input id="btn_draw_track_view" type="button" value="显示" />
      </div>
    </div>
  </body>
  <!-- 先引入 Vue -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->

  <script>
    // 创建地图示例
    var _map = new ShipxyAPI.Map('map', { ak: '您的密钥' })

    var _tds // 航线对象
    var _tds_data // 航线数据
    // 航线绘制
    $('#btn_draw_track').on('click', function () {
      if (!_tds) {
        var options = {
          callBack: function (item) {
            _tds_data = item
            console.log('====航线绘制 callBack===', item)
          },
          unit: 'nm',
          symbol: 'ABC_',
        }
        _tds = ShipxyAPI.trackDrawSymbol(_map, options)
      }
      _tds.drawTrack()
    })
    // 航线编辑
    $('#btn_draw_track_edit').on('click', function () {
      if (!!_tds) {
        _tds.editLine()
      }
    })
    // 航线绘制完成
    $('#btn_draw_track_finish').on('click', function () {
      if (!!_tds) {
        // 只读模态
        _tds.showTrack()
      }
    })
    // 删除航线
    $('#btn_draw_track_delete').on('click', function () {
      if (!!_tds) {
        // 删除航线
        _tds.removeTrack()
      }
    })
    // 显示航线
    $('#btn_draw_track_view').on('click', function () {
      if (!!_tds_data) {
        // 显示航线
        _tds.showTrack(_tds_data)
      }
    })
    // new Vue({
    //   el: '#app',
    //   data: {},
    //   mounted() {},

    //   methods: {},
    // })
  </script>
</html>
